<template>
  <div class="q-pa-md">
    <t-btn
      push
      color="teal"
      label="Change image"
      @click="refresh"
      class="q-mb-md"
    />

    <div class="q-gutter-sm row items-start">
      <t-img
        :src="url"
        spinner-color="red"
        style="height: 140px; max-width: 150px"
      />

      <t-img
        :src="url"
        spinner-color="primary"
        spinner-size="82px"
        style="height: 140px; max-width: 150px"
      />

      <t-img :src="url" style="height: 140px; max-width: 150px">
        <template v-slot:loading>
          <div class="text-subtitle1 text-white"> Loading... </div>
        </template>
      </t-img>

      <t-img :src="url" style="height: 140px; max-width: 150px">
        <template v-slot:loading>
          <t-spinner-gears color="white" />
        </template>
      </t-img>

      <t-img :src="url" style="height: 140px; max-width: 150px">
        <template v-slot:loading>
          <div class="text-yellow">
            <t-spinner-ios />
            <div class="q-mt-md">Loading...</div>
          </div>
        </template>
      </t-img>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const url = ref('https://picsum.photos/500/300');

      return {
        url,
        refresh() {
          url.value = 'https://picsum.photos/500/300?t=' + Math.random();
        },
      };
    },
  };
</script>
